<template>
    <div class="login">
        <div class="back-1"></div>
        <div class="back-2"></div>
        <div class="login-modal">
            <div class="login-logo"> <img src="../assets/images/logo.png" alt="logo"></div>
            <div class="login-sub-title"></div>
            <a-form :model="form" :style="{ marginLeft: '50px', width: '400px' }" @submit="handleSubmit" size="large"
                :rules="rules" :label-col-props="{ span: 0 }">
                <a-form-item field="username" validate-trigger="blur">
                    <a-input v-model="form.username" :placeholder="$t('login.usernameInputPlaceholder')">
                        <template #prefix>
                            <icon-user />
                        </template>
                    </a-input>
                </a-form-item>
                <a-form-item field="password" validate-trigger="blur">
                    <a-input type="password" v-model="form.password"
                        :placeholder="$t('login.passwordInputPlaceholder')">
                        <template #prefix>
                            <icon-lock />
                        </template>
                    </a-input>
                </a-form-item>
                <a-form-item v-if="captchaValid" field="captcha" class="arco-col-16" validate-trigger="blur">
                    <a-input v-model="form.captcha" :placeholder="$t('login.captchaInputPlaceholder')">
                        <template #prefix>
                            <icon-safe />
                        </template>
                    </a-input>
                    <img :src="captchaSrc" class="arco-col-8" @click="getCaptcha" />
                </a-form-item>
                <a-form-item>
                    <a-checkbox v-model="rememberMe" @change="changeRemember">记住密码</a-checkbox>
                </a-form-item>
                <a-form-item>
                    <a-button :style="{ width: '100%' }" type="primary" html-type="submit">{{ $t('login.btn')
                    }}</a-button>
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>
<script setup>
import { getToken, needCaptcha, captcha } from '@/api/login'
import { onMounted, reactive, ref } from "vue";

import { useI18n } from 'vue-i18n'
import { useUserStore } from '@/stores/user';
import { storeToRefs } from 'pinia';
const { t } = useI18n()
const { doLogin, changeRemember } = useUserStore()
const { rememberMe } = storeToRefs(useUserStore())

const captchaValid = ref(false)
const captchaSrc = ref('')

const form = reactive({
    username: '',
    password: '',
    captcha: '',
    token: ''
})

const refreshToken = () => {
    getToken().then(res => {
        if (res.code === 200) {
            form.token = res.data.token
            isNeedCaptcha()
        }
    })
}

const isNeedCaptcha = () => {
    needCaptcha().then(res => {
        if (res.code === 200) {
            captchaValid.value = res.data
            if (captchaValid.value) {
                getCaptcha()
            }
        }
    })
}

const getCaptcha = () => {
    captcha({ token: form.token }).then(res => {
        if (res.code === 200) {
            captchaSrc.value = res.data.img
        }
    })
}

const handleSubmit = ({ values, errors }) => {
    if (!errors) {
        doLogin(values, rememberMe).then(res => {
            if (res.code !== 200) {
                refreshToken()
            }
        })
    }
}

const rules = {
    username: [
        {
            required: true,
            message: t('login.usernameInputPlaceholder'),
        },
    ],
    password: [
        {
            required: true,
            message: t('login.passwordInputPlaceholder'),
        },
        {
            maxLength: 32,
            message: t('login.passwordInputLengthError'),
        },
        {
            minLength: 6,
            message: t('login.passwordInputLengthError'),
        },
    ],
    captcha: [
        {
            required: true,
            message: t('login.captchaInputPlaceholder'),
        },
    ],
}

onMounted(() => {
    refreshToken()
    if (rememberMe.value) {
        form.username = localStorage.getItem('username')
        form.password = localStorage.getItem('password')
    }
})

</script>
<style lang="less">
.login {
    background-size: cover;
    background-image: url('../assets/images/bg.jpeg');
    position: relative;
    width: 100%;
    height: 100%;


    .back-1 {
        width: 550px;
        height: 450px;
        background: var(--color-bg-2);
        ;
        position: absolute;
        right: 230px;
        top: 0;
        bottom: 0;
        margin-top: auto;
        margin-bottom: auto;
        opacity: 0.6;
        box-shadow: 5px 5px 20px 5px #777676;
        border-radius: 5px;
    }

    .back-2 {
        width: 600px;
        height: 350px;
        background: var(--color-bg-2);
        position: absolute;
        right: 206px;
        top: 0;
        bottom: 0;
        margin-top: auto;
        margin-bottom: auto;
        opacity: 0.3;
        box-shadow: 5px 5px 20px 5px #777676;
        border-radius: 5px;
    }


    .login-modal {
        background: var(--color-bg-2);
        box-shadow: 5px 5px 20px 5px #777676;
        width: 500px;
        height: 550px;
        position: absolute;
        right: 254px;
        top: 0;
        bottom: 0;
        margin-top: auto;
        margin-bottom: auto;
        padding: 80px 53px 0;
        border-radius: 5px;
    }

    .login-logo {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .login-logo img {
        width: 350px;
    }

    .login-title {
        text-align: center;
        font-weight: 500;
        font-size: 32px;
        margin: 0 auto;
        color: var(--color-text-2);
        font-family: "SimHei", sans - serif;
    }

    .login-sub-title {
        font-size: 24px;
        font-weight: 500;
        text-align: center;
        margin: 20px auto;
        color: var(--color-text-2);
        font-family: "SimHei", sans - serif;
    }
}
</style>